<template>
	<!-- 组件的结构 -->
	<div>
		<h1>时间戳是：{{time}}</h1>
		<h1>时间是（computed实现）：{{time2}}</h1>
		<h1>时间是（watch实现）：{{time3}}</h1>
		<h1>时间是（methods实现）：{{fmtTime()}}</h1>
		<h1>时间是（过滤器实现）：{{time | chuliTime(6) | chuliTime2(7)}}</h1>
		<Student/>
	</div>
</template>

<script>
	import dayjs from 'dayjs'
	import Student from './components/Student.vue'

	//定义并暴露一个组件的配置
	export default {
		name:'App',
		components:{Student},
		data() {
			return {
				time:1218196800000,
				time3:''
			}
		},
		methods: {
			fmtTime(){
				return dayjs(this.time).format('YYYY年 MM月DD日 HH:mm:ss')
			}
		},
		computed: {
			time2(){
				return dayjs(this.time).format('YYYY年 MM月DD日 HH:mm:ss')
			}
		},
		watch:{
			time:{
				immediate:true,
				handler(){
					this.time3 = dayjs(this.time).format('YYYY年 MM月DD日 HH:mm:ss')
				}
			}
		},
		filters:{ //配置局部过滤器（只能在当前组件的结构中使用）
			//chuliTime函数何时会被调用？ —— 有人使用该过滤器的时候
			/* chuliTime(value,number){
				return dayjs(value).format('YYYY年 MM月DD日 HH:mm:ss')
			}, */
			chuliTime2(value,number){
				return value.slice(0,5)
			}
		}
	}
</script>
